<html>
<head>

<script type="text/JavaScript" src="jquery.js"></script>
<script type="text/JavaScript" src="jquery-ui.js"></script>
<meta charset="utf-8">
	
<style>
	.redfill { background-color: red; }
	.red { color: red; }
	#parent { width: 201px; height: 201px; border: 1px solid; padding: 0px;}
	#handle { width: 31px; height: 31px; border: 1px solid; margin: 0 0 0 0;}
</style>

<script>
  var server="http://192.168.0.99:8080";
  var myInterval;
  var count = 0;
  $(document).ready(function(){
    $( "#handle" ).draggable({ 
	containment: "parent", 
	cursor: "move",
	cursorAt: {top: 16, left: 16},
	revert: true,
	revertDuration: 1,
	start: function() {
               	$("p#message").text('START');
       		$.post(server + "/init", function(xml) {
               		$("p#count_value").text($("Value",xml).text());
        	}, "xml");
		$(this).addClass("redfill");
		myInterval = window.setInterval(function() {
			topval = $("#handle").position().top;
			leftval = $("#handle").position().left;
			$("#joyleft").text(leftval);
			$("#joytop").text(topval);
			count = count + 1;
        		$.post(server + "/update", {top: topval, left: leftval},
				function(xml) {
                	  	  $("p#count_value").text($("Value",xml).text());
        		        }, 
			"xml");
		},200);
	},
	drag: function() {
               	$("p#message").text('DRAG');
		// $("#joyleft").text($("#handle").position().left);
		// $("#joytop").text($("#handle").position().top);
	},
	stop: function() {
        	$.post(server + "/stop", function(xml) {
               		$("p#message").text($("Msg",xml).text());
        	}, "xml");
		$(this).removeClass("redfill");
		clearInterval(myInterval);
	}
    });
    $( "#handle" ).position({
	of: $("#parent"), 
	my: "center center", 
	at: "center center"
    });
  });
</script>


<div id="parent" class="draggable ui-widget-content">
	<p id="handle" class="ui-widget-header"></p>
</div>

<p id="joyleft"></p>
<p id="joytop"></p>
<p id="countvalue"></p>
<p id="message"></p>


</body>
</html>

